import { defineComponent, watch, shallowReactive, ref } from 'vue'
import * as echarts from 'echarts'
// 声明类型
const PropsType = {
  data: {
    type: Object,
    default: () => ({
      legend:[],
      list:[],
    }),
    require: true
  }
} as const

const color = ref(['rgba(20, 204, 131, 1)', 'rgba(49, 193, 245, 1)','rgba(46, 88, 229, 1)','rgba(229, 138, 46, 1)','rgba(229, 92, 46, 1)'])

// 定义主体
export default defineComponent({
  props: PropsType,

  setup(props) {
    // 定义 ref
    const chartRef = ref()

    // 配置项
    let options = {}

    watch(
      () => props.data,
      (val: any) => {
        //
        options = {

          title: {
            textStyle: {
              rich: {
                a: {
                  fontSize: 16,
                  fontWeight: 600,
                },
              },
            },
            top: '2%',
            left: '2%',
          },
          legend: {
            data: val.legend,
            textStyle: {
              align: 'right',
            },
            top: '2%',
            right: '2%',
          },
          tooltip: {
            trigger: 'axis',
          },
          grid: {
            top: '18%',
            left: '15%',
            right: '5%',
            bottom: '15%',
          },
          xAxis: [
            {
              type: 'category',
              axisLine: {
                show: true,
              },
              splitArea: {
                // show: true,
                color: '#f00',
                lineStyle: {
                  color: '#f00',
                },
              },
              splitLine: {
                show: false,
              },
              axisLabel: {
                margin: 10,
              },
              boundaryGap: false,
              data: val.time,
            },
          ],

          yAxis: [
            {
              type: 'value',
              // min: 0,
              // max: 140,
              splitNumber: 4,
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#e3e3e3',
                },
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                show: true,
                margin: 20,
                formatter: '{value}',
              },
              axisTick: {
                show: false,
              },
            },
          ],
          series: val.list.map((item,index)=>{
            return {
              name: val.legend[index],
              type: 'line',
              smooth: true, //是否平滑
              showAllSymbol: true,
              symbol: 'circle',
              symbolSize: 12,
              lineStyle: {
                normal: {
                  color: color[index],
                },
              },
              itemStyle: {
                color: color[index],
                borderColor: '#fff',
                borderWidth: 3,
              },
              data: item.map(item1=>item1.value),
            }
          })
        }
        // 手动触发更新
        if (chartRef.value) {
          // 通过初始化参数打入数据
          setTimeout(()=>{
            chartRef.value.initChart(options,true)
          },100)
          
        }
      },
      {
        immediate: true,
        deep: true
      }
    )

    return () => {
      const height = "152px"
      const width = "432px"

      return <div>
        <echart ref={chartRef} class="mr-auto" options={options} height={height} width={width} />
      </div>
    }
  }
})

